<template>
	<view>
		 <uni-segmented-control :current="current" :values="items" 
			@clickItem="onClickItem" styleType="text" activeColor="#b9cfff"></uni-segmented-control>
		 <view style="padding: 20rpx;">
			<view v-if="current === index" v-for="(tab, index) in 4" :key="index">
				<view v-for="item in ordersList" :key="item.id">
					<view class="box"  style="margin-bottom: 10rpx;" v-if= " !item.deleted ">
					<view style="display: flex; align-items: baseline; margin-bottom: 10rpx;">
						<!-- 导航跳转到店铺 -->
						<navigator :url="'/pages/detail/detail?businessId=' + item.businessId"
							style="flex: 1; font-size: 32rpx; ">{{ item.businessName }}  
							<uni-icons type="right" size="16" color="#666" style="position: relative; top: 2rpx;"></uni-icons>
						</navigator>
						<view style="font-size: 24rpx; color: #666;">{{ item.status }}</view>
					</view>
					<view style="display: flex; align-items: center; grid-gap: 20rpx; margin-bottom: 10rpx;">
						<view><image style="display: block; width: 160rpx; height: 160rpx; border-radius: 10rpx;" :src="item.cover"></image></view>
						<view style="flex: 1;">{{ item.name }}</view>
						<view>实付￥<text style="font-size: 36rpx; font-weight: bold; color: red;">{{ item.actual }}</text></view>
					</view>
					<view style="display: flex; min-height: 40rpx;">
						<view style="flex: 1;" v-if="item.status === '已取消' || item.status === '已完成' || item.status === '已退款'">
							<view @click="del(item.id)">
								<uni-icons type="trash" size="16" color="#666" style="position: relative; top: 2rpx;" ></uni-icons>
								<text style="font-size: 24rpx; color: #666;">删除</text>
							</view>
						 </view>
						 <view style="display: flex;flex:1">
							 <view v-if="item.status === '待支付'" style="display: flex;">
								 请在
								 <uni-countdown 
								 :minute="minute" :second="second" :show-day="false" :show-hour="false"
								 @timeup="timeup(item,'已取消')"
								 ></uni-countdown>
								 内完成支付
							</view>
							<view style="text-align: right;flex:1">
							 <uni-tag v-if="item.status === '待支付'" text="支付" size="mini" type="primary" @click="changeStatus(item, '待发货')"></uni-tag>
							 <uni-tag v-if="item.status === '待支付'" text="取消订单" size="mini" type="error" style="margin-left: 10rpx;" @click="changeStatus(item, '已取消')"></uni-tag>
							 <uni-tag v-if="item.status === '待发货'" text="申请退款" size="mini" type="error" style="margin-right: 10rpx;" @click="changeStatus(item, '已退款')"></uni-tag>
							 <uni-tag v-if="item.status === '待骑手接单'" text="申请退款" size="mini" type="error" style="margin-right: 10rpx;" @click="changeStatus(item, '已退款')"></uni-tag>
							  <uni-tag v-if="item.status === '待收货'" text="确认收货" size="mini" type="warning" @click="changeStatus(item, '待评价')"></uni-tag>
							  <uni-tag v-if="item.status === '待评价'" text="评价" size="mini" type="royal" @click = "goComment(item.id)"></uni-tag>
							</view>
						 </view>
					</view>
					</view>
				</view>
			</view>
		</view>	
	</view>
</template>

<script>
	export default {
		data() {
			return {
				current: 0,
				items: ['全部', '进行中', '待评价', '已退款'],
				ordersList: [],
				minute:"100",
				second:"0",
				user: uni.getStorageSync('xm-user')
			}
		},
		onShow() {
			this.loadOrders()
		},
		methods: {
			del(orderId) {
				// 用户只能假删除订单，不能真正的删除数据库中的记录
				this.$request.put('/orders/update/',{id:orderId,deleted:1}).then(res => {
					if (res.code === '200') {
					  uni.showToast({
					    icon: "success",
					    title: '操作成功'
					  })
					  this.loadOrders()
					} else {
					  uni.showToast({
					    icon: "error",
					    title: res.msg
					  })
					}
				})
			},
			changeStatus(orders, status) {
				this.user = uni.getStorageSync('xm-user')
				let form = JSON.parse(JSON.stringify(orders))
				form.status = status
				this.$request.put('/orders/update', form).then(res => {
					if (res.code === '200') {
					  uni.showToast({
					    icon: "success",
					    title: '操作成功'
					  })
					  this.loadOrders()
					} else {
					  uni.showToast({
					    icon: "error",
					    title: res.msg
					  })
					}
				})
			},
			loadOrders() {
				this.user = uni.getStorageSync('xm-user')
				let status = '全部'
				switch(this.current) {
					case 0: status = '全部'; break
					case 1: status = '进行中'; break
					case 2: status = '待评价'; break
					case 3: status = '已退款'; break
				}
				this.$request.get('/orders/selectAll', { userId:  this.user.id, status: status }).then(res => {
					console.log(this.user.id)
					this.ordersList = res.data || []
					let list = this.ordersList
					const now = new Date();
					
					for(let o in list){
						if(list[o].status === '待支付'){
							console.log(time)
							let time = new Date(list[o].time)
							var difftime = 15*60 - (now-time)/1000
							this.minute = parseInt(difftime%3600/60); // 分钟 -(day*24) 以60秒为一整份 取余 剩下秒数 秒数/60 就是分钟数
							this.second = parseInt(difftime%60);  // 以60秒为一整份 取余 剩下秒数
						}
					}
				})
			},
			timeup(orders,status){
				let form = JSON.parse(JSON.stringify(orders))
				form.status = status
				this.$request.put('/orders/update', form).then(res => {
					if (res.code === '200') {
					  uni.showToast({
					    icon: "success",
					    title: '订单已取消'
					  })
					  this.loadOrders()
					} else {
					  uni.showToast({
					    icon: "error",
					    title: res.msg
					  })
					}
				})
			},
			onClickItem(e) {
				  if (this.current != e.currentIndex) {
					this.current = e.currentIndex;
					this.loadOrders()
				  }
			  },
			  goComment(orderId){
				  uni.navigateTo({
					url:'/pages/comment/comment?orderId=' + orderId
				  })
			}
		}
	}
</script>

<style>

</style>